import { Button, Card, Space, Table, message } from 'antd';
import React, { useEffect, useState } from 'react';

import ModelTk from './ModelTk';
import { DELCorridor, SetCorridor } from '../request';
import dayjs from 'dayjs';
import { useDeleteConfirm } from '@/hooks/useAlartMolder';
import { useIntl } from '@umijs/max';
import { SendCard } from '@/utils/Send';

interface Props {
  setsendMsg: any;
  setType: any;
  setTDRoomID: any;
  setCardMessage: any;
}

const LadderCard: React.FC<Props> = ({ setTDRoomID, setCardMessage, setsendMsg, setType }) => {
  const intl = useIntl();
  const columns: any = [
    // {
    //   title: 'ID号',
    //   dataIndex: 'id',
    //   align: "center"
    // },
    {
      title: intl.formatMessage({ id: 'FixLock.Building' }),
      dataIndex: 'bname',
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'FixLock.Floor' }),
      dataIndex: 'floor',
      align: 'center',
    },
    {
      title: intl.formatMessage({ id: 'FixLock.channel' }) + ' ID',
      dataIndex: 'roomId',
      align: 'center',
    },
    ,
    {
      title: intl.formatMessage({ id: 'FixLock.Channel name' }),
      dataIndex: 'roomName',
      align: 'center',
    },
    //
    {
      title: intl.formatMessage({ id: 'FixLock.Action' }),
      align: 'center',
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={async () => {
              if (localStorage.getItem('clientid') == '00000000')
                return message.error(intl.formatMessage({ id: 'RoomSettings.Please register' }));
              let data = {
                cardclass: 'firstsetcard',
                uuid: 'setcardBBBB',
                setroomid: record.roomId,
                setlocktime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                setoveropen: '1',
                setfalselock: '1',
              };
              let res = await SendCard(data);
              setCardMessage(res);
              setType(`${record.roomName}初发设置卡成功`);
              setTDRoomID(record);
            }}
          >
            {/* 初发设置卡 */}
            {intl.formatMessage({ id: 'RoomSettings.Initial setup card' })}
          </a>
          <a
            onClick={async () => {
              if (localStorage.getItem('clientid') == '00000000')
                return message.error(intl.formatMessage({ id: 'RoomSettings.Please register' }));
              let data = {
                cardclass: 'setcard',
                uuid: 'setcardAAAA',
                setroomid: record.roomId,
                setlocktime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                setoveropen: '1',
                setfalselock: '1',
              };
              let res = await SendCard(data);
              setCardMessage(res);
              setsendMsg(data);
              setType(`${record.roomName}更新设置卡成功`);
              setTDRoomID(record);
            }}
          >
            {/* 更新发设置卡 */}
            {intl.formatMessage({ id: 'RoomSettings.Update settings card' })}
          </a>
          <a

          style={{ color:"red" }}
            onClick={async () => {
              if (Roomlist.length == 1) {
                useDeleteConfirm(intl.formatMessage({id:"RoomSettings.Room Last One"}), '', async (res) => {
                  if (res == true) {
                    let data = await DELCorridor(record.id);
                    if (data.code == 0) {
                      message.success(
                        intl.formatMessage({ id: 'RoomSettings.Deleted successfully' }),
                      );
                      TDlist();
                      setRoomlist([]);
                    }
                  }
                });
              } else {
                let data = await DELCorridor(record.id);
                if (data.code == 0) {
                  message.success(intl.formatMessage({ id: 'RoomSettings.Deleted successfully' }));
                  TDlist();
                }
              }
            }}
          >
            {intl.formatMessage({ id: 'FixLock.delete' })}
          </a>
        </Space>
      ),
    },
  ];
  const [Roomlist, setRoomlist] = useState<any[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    TDlist();
  };
  const TDlist = async () => {
    let data = await SetCorridor({
      page: '1',
      pageSize: '20',
    });
    console.log(data);
    setRoomlist(data.data.list);
  };
  useEffect(() => {
    TDlist();
  }, []);

  return (
    <>
      <Card title={intl.formatMessage({ id: 'RoomSettings.Channel Set cards' })}>
        <Button type="primary" onClick={() => showModal()}>
          {intl.formatMessage({ id: 'RoomSettings.Add channel door' })}
        </Button>
      </Card>{' '}
      <br />
      <Card style={{ height: '79.7%' }}>
        <Table
          style={{ marginTop: '20px' }}
          rowKey={'id'}
          columns={columns}
          dataSource={Roomlist}
          pagination={false}
        />
      </Card>
      {isModalOpen == true && (
        <ModelTk isModalOpen={isModalOpen} handleOk={handleOk} handleCancel={handleCancel} />
      )}
    </>
  );
};

export default LadderCard;
